<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="运维管理—字典管理"></Header>

    <!-- 标签页 -->
    <el-tabs type="border-card">
      <el-tab-pane label="设备系统">
        <!-- 搜索栏 -->
        <section class="search_bar">
          <LButton label="＋新增" @click="repairDialog = true"></LButton>
        </section>
        <!-- 表格 -->
        <el-table :data="tableData1" style="width: 100%" :default-sort="{ prop: 'a', order: 'ascending' }" border>
          <el-table-column prop="a" label="系统编码" sortable width="180" />
          <el-table-column prop="b" label="系统名称" />
          <el-table-column prop="c" label="拼音简码" />
          <el-table-column label="操作" width="140">
            <el-button type="primary" size="mini" @click="repairDialog1 = true">编辑</el-button>
            <el-button type="danger" size="mini" @click="del1">删除</el-button>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="设备类别">
        <!-- 搜索栏 -->
        <section class="search_bar">
          <LButton label="＋新增" @click="repairDialog2 = true"></LButton>
        </section>
        <!-- 表格 -->
        <el-table :data="tableData1" style="width: 100%" :default-sort="{ prop: 'a', order: 'ascending' }" border>
          <el-table-column prop="a" label="设备类别编码" sortable width="180" />
          <el-table-column prop="b" label="设备类别名称" />
          <el-table-column prop="b" label="设备系统名称" />
          <el-table-column prop="c" label="拼音简码" />
          <el-table-column label="操作" width="140">
            <template #default>
              <el-button type="primary" size="mini" @click="repairDialog3 = true">编辑</el-button>
              <el-button type="danger" size="mini" @click="del3">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="区域">
        <!-- 搜索栏 -->
        <section class="search_bar">
          <LButton label="＋新增" @click="repairDialog4 = true"></LButton>
        </section>
        <!-- 表格 -->
        <el-table :data="tableData1" style="width: 100%" :default-sort="{ prop: 'a', order: 'ascending' }" border>
          <el-table-column prop="a" label="区域编码" sortable width="180" />
          <el-table-column prop="b" label="区域名称" />
          <el-table-column prop="c" label="拼音简码" />
          <el-table-column label="操作" width="140">
            <template #default>
              <el-button type="primary" size="mini" @click="repairDialog5 = true">编辑</el-button>
              <el-button type="danger" size="mini" @click="del5">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="部门">
        <!-- 搜索栏 -->
        <section class="search_bar">
          <LButton label="＋新增" @click="repairDialog6 = true"></LButton>
        </section>
        <!-- 表格 -->
        <el-table :data="tableData1" style="width: 100%" :default-sort="{ prop: 'a', order: 'ascending' }" border>
          <el-table-column prop="a" label="部门编码" sortable width="180" />
          <el-table-column prop="b" label="部门名称" />
          <el-table-column prop="c" label="区域名称" />
          <el-table-column prop="d" label="拼音简码" />
          <el-table-column label="操作" width="140">
            <template #default>
              <el-button type="primary" size="mini" @click="repairDialog7 = true">编辑</el-button>
              <el-button type="danger" size="mini" @click="del7">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 设备系统 弹出框：新增 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog" title="添加" width="30%" @close="repairDialogClose">
        <el-form label-width="100px" :model="repairForm" ref="repairFormRef" :rules="repairFormRules">
          <el-form-item label="设备系统编码" prop="a" style="width:100%">
            <el-input v-model="repairForm.a" placeholder="自动生成"></el-input>
          </el-form-item>
          <el-form-item label="设备系统名称" prop="c" style="width:100%">
            <el-input v-model="repairForm.c"></el-input>
          </el-form-item>
          <el-form-item label="拼音简码" prop="d" style="width:100%">
            <el-input v-model="repairForm.d"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairSureBtn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <!-- 设备系统 弹出框：编辑 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog1" title="编辑" width="30%" @close="repairDialog1Close">
        <el-form label-width="100px" :model="repairForm1" ref="repairForm1Ref" :rules="repairForm1Rules">
          <el-form-item label="设备系统编码" prop="a" style="width:100%">
            <el-input v-model="repairForm1.a" disabled></el-input>
          </el-form-item>
          <el-form-item label="设备系统名称" prop="c" style="width:100%">
            <el-input v-model="repairForm1.c"></el-input>
          </el-form-item>
          <el-form-item label="拼音简码" prop="d" style="width:100%">
            <el-input v-model="repairForm1.d"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairSure1Btn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog1 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <!-- 设备类别 弹出框：新增 -->
    <div v-dialogdrag class="tab1">
      <el-dialog v-model="repairDialog2" title="添加" width="30%" @close="repairDialog2Close">
        <el-form label-width="100px" :model="repairForm2" ref="repairForm2Ref" :rules="repairForm2Rules">
          <el-form-item label="设备类别编码" prop="a" style="width:100%">
            <el-input v-model="repairForm2.a" placeholder="自动生成"></el-input>
          </el-form-item>
          <el-form-item label="设备系统" prop="b">
            <el-select v-model="repairForm2.b" filterable>
              <el-option label="区域1" value="1"></el-option>
              <el-option label="区域2" value="2">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备类别名称" prop="c" style="width:100%">
            <el-input v-model="repairForm2.c"></el-input>
          </el-form-item>
          <el-form-item label="拼音简码" prop="d" style="width:100%">
            <el-input v-model="repairForm2.d"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairSure2Btn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog2 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <!-- 设备类别 弹出框：编辑 -->
    <div v-dialogdrag class="tab1">
      <el-dialog v-model="repairDialog3" title="编辑" width="30%" @close="repairDialog3Close">
        <el-form label-width="100px" :model="repairForm3" ref="repairForm3Ref" :rules="repairForm3Rules">
          <el-form-item label="设备类别编码" prop="a" style="width:100%">
            <el-input v-model="repairForm3.a" disabled></el-input>
          </el-form-item>
          <el-form-item label="设备系统" prop="b">
            <el-select v-model="repairForm3.b" filterable>
              <el-option label="区域1" value="1"></el-option>
              <el-option label="区域2" value="2">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备类别名称" prop="c" style="width:100%">
            <el-input v-model="repairForm3.c"></el-input>
          </el-form-item>
          <el-form-item label="拼音简码" prop="d" style="width:100%">
            <el-input v-model="repairForm3.d"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairSure3Btn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog3 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <!-- 区域 弹出框：新增 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog4" title="添加" width="30%" @close="repairDialog4Close">
        <el-form label-width="80px" :model="repairForm4" ref="repairForm4Ref" :rules="repairForm4Rules">
          <el-form-item label="区域编码" prop="a" style="width:100%">
            <el-input v-model="repairForm4.a" placeholder="自动生成"></el-input>
          </el-form-item>
          <el-form-item label="区域名称" prop="c" style="width:100%">
            <el-input v-model="repairForm4.c"></el-input>
          </el-form-item>
          <el-form-item label="拼音简码" prop="d" style="width:100%">
            <el-input v-model="repairForm4.d"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairSure4Btn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog4 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <!-- 区域 弹出框：编辑 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog5" title="编辑" width="30%" @close="repairDialog5Close">
        <el-form label-width="80px" :model="repairForm5" ref="repairForm5Ref" :rules="repairForm5Rules">
          <el-form-item label="区域编码" prop="a" style="width:100%">
            <el-input v-model="repairForm5.a" disabled></el-input>
          </el-form-item>
          <el-form-item label="区域名称" prop="c" style="width:100%">
            <el-input v-model="repairForm5.c"></el-input>
          </el-form-item>
          <el-form-item label="拼音简码" prop="d" style="width:100%">
            <el-input v-model="repairForm5.d"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairSure5Btn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog5 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <!-- 部门 弹出框：新增 -->
    <div v-dialogdrag class="tab2">
      <el-dialog v-model="repairDialog6" title="添加" width="30%" @close="repairDialog6Close">
        <el-form label-width="80px" :model="repairForm6" ref="repairForm6Ref" :rules="repairForm6Rules">
          <el-form-item label="部门编码" prop="a" style="width:100%">
            <el-input v-model="repairForm6.a" placeholder="自动生成"></el-input>
          </el-form-item>
          <el-form-item label="区域" prop="b">
            <el-select v-model="repairForm6.b" filterable>
              <el-option label="区域1" value="1"></el-option>
              <el-option label="区域2" value="2">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门名称" prop="c" style="width:100%">
            <el-input v-model="repairForm6.c"></el-input>
          </el-form-item>
          <el-form-item label="拼音简码" prop="d" style="width:100%">
            <el-input v-model="repairForm6.d"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairSure6Btn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog6 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <!-- 部门 弹出框：编辑 -->
    <div v-dialogdrag class="tab2">
      <el-dialog v-model="repairDialog6" title="添加" width="30%" @close="repairDialog6Close">
        <el-form label-width="80px" :model="repairForm6" ref="repairForm6Ref" :rules="repairForm6Rules">
          <el-form-item label="部门编码" prop="a" style="width:100%">
            <el-input v-model="repairForm6.a" placeholder="自动生成"></el-input>
          </el-form-item>
          <el-form-item label="区域" prop="b">
            <el-select v-model="repairForm6.b" filterable>
              <el-option label="区域1" value="1"></el-option>
              <el-option label="区域2" value="2">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门名称" prop="c" style="width:100%">
            <el-input v-model="repairForm6.c"></el-input>
          </el-form-item>
          <el-form-item label="拼音简码" prop="d" style="width:100%">
            <el-input v-model="repairForm6.d"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" size="mini" @click="repairSure6Btn">确定</el-button>
            <el-button type="info" size="mini" @click="repairDialog6 = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import Header from "@/components/Header";
import moment from "moment";
import LInput from "../../../components/LInput.vue";
import LButton from "../../../components/LButton.vue";
import LDateTimeSelect2 from "@/components/LDateTimeSelect2.vue";
import LSelect from "@/components/LSelect.vue";
import LInput2 from "@/components/LInput2.vue";

export default {
  components: {
    Header,
    LInput,
    LButton,
    LDateTimeSelect2,
    LSelect,
    LInput2,
  },
  data() {
    return {
      close: false,
      option1: [
        { label: "全部", value: "1" },
        { label: "梁山县水泊商务中心", value: "2" },
      ],

      tableData1: [
        {
          a: "02",
          b: "检查机组运行噪声",
          c: "冷水机组",
          d: "检查空调机组运转时声音和震动是否正常",
        },
      ],
      repairDialog: false,
      repairForm: {},
      repairDialog1: false,
      repairForm1: {},
      repairDialog2: false,
      repairForm2: {},
      repairDialog3: false,
      repairForm3: {},
      repairDialog4: false,
      repairForm4: {},
      repairDialog5: false,
      repairForm5: {},
      repairDialog6: false,
      repairForm6: {},
      repairDialog7: false,
      repairForm7: {},
    };
  },
  mounted() {},
  beforeUnmount() {},
  methods: {
    //设备系统页签“新增”窗口清空功能
    repairDialogClose() {
      this.$refs.repairFormRef.resetFields();
    },
    //设备系统页签“编辑”窗口清空功能
    repairDialog1Close() {
      this.$refs.repairForm1Ref.resetFields();
    },
    //设备系统页签“删除”窗口清空功能
    del1() {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          // post("/airChannel/deleteAirChannel", { id: id }).then((res) => {
          //   // console.log(res);
          //   if (res.data.code == 200) {
          //     this.$message.success(res.data.data);
          //     this.getData();
          //   } else {
          //     this.$message.error(res.data.data);
          //   }
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //=======================================================
    //设备类别页签“新增”窗口清空功能
    repairDialog2Close() {
      this.$refs.repairForm2Ref.resetFields();
    },
    //设备类别页签“编辑”窗口清空功能
    repairDialog3Close() {
      this.$refs.repairForm3Ref.resetFields();
    },
    //设备类别页签“删除”窗口清空功能
    del3() {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          // post("/airChannel/deleteAirChannel", { id: id }).then((res) => {
          //   // console.log(res);
          //   if (res.data.code == 200) {
          //     this.$message.success(res.data.data);
          //     this.getData();
          //   } else {
          //     this.$message.error(res.data.data);
          //   }
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //=======================================================
    //区域页签“新增”窗口清空功能
    repairDialog4Close() {
      this.$refs.repairForm4Ref.resetFields();
    },
    //区域页签“编辑”窗口清空功能
    repairDialog5Close() {
      this.$refs.repairForm5Ref.resetFields();
    },
    //区域页签“删除”窗口清空功能
    del5() {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          // post("/airChannel/deleteAirChannel", { id: id }).then((res) => {
          //   // console.log(res);
          //   if (res.data.code == 200) {
          //     this.$message.success(res.data.data);
          //     this.getData();
          //   } else {
          //     this.$message.error(res.data.data);
          //   }
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //=======================================================
    //部门“新增”窗口清空功能
    repairDialog6Close() {
      this.$refs.repairForm6Ref.resetFields();
    },
    //部门“编辑”窗口清空功能
    repairDialog7Close() {
      this.$refs.repairForm7Ref.resetFields();
    },
    //部门“删除”窗口清空功能
    del7() {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          // post("/airChannel/deleteAirChannel", { id: id }).then((res) => {
          //   // console.log(res);
          //   if (res.data.code == 200) {
          //     this.$message.success(res.data.data);
          //     this.getData();
          //   } else {
          //     this.$message.error(res.data.data);
          //   }
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../opera.less";

.search_bar {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.row-1 {
  display: flex;
  justify-content: space-between;
  padding: 0 2vw 0 0;
}

.tab1 {
  /deep/ .el-dialog .el-select {
    width: 434px;
  }
}

.tab2 {
  /deep/ .el-dialog .el-select {
    width: 454px;
  }
}
</style>